<template>
  <div class="namess">
    <van-tabs v-model="active">
        <van-tab title="精选">
            <div class="dadada">
              <div v-for="(v,index) in shangpi" :key="index" class="dahngp" @click="xiangxi(index)">
                <div>
                  <img :src="v.img1" alt="">
                </div>
                <div class="h1s">{{ v.h1 }}</div>
                <div class="h2s">{{ v.h2 }}</div>
                <div class="ssdfsds"><span class="span1">{{ v.huodong1 }}</span><span class="span1 span2">{{  v.huodong2 }}</span></div>
                <div class="ssdfsds">
                  <span class="pspan1">{{ v.price }}</span><span class="pspan2">{{ v.priceold }}</span>
                </div>
              </div>
            </div>
        </van-tab>
        <van-tab title="华硕好屏">
          <div class="dadada">
              <div v-for="(v,index) in shangpi1" :key="index" class="dahngp" @click="xiangxi9(index)">
                <div>
                  <img :src="v.img1" alt="">
                </div>
                <div class="h1s">{{ v.h1 }}</div>
                <div class="h2s">{{ v.h2 }}</div>
                <div class="ssdfsds"><span class="span1">{{ v.huodong1 }}</span><span class="span1 span2">{{  v.huodong2 }}</span></div>
                <div class="ssdfsds">
                  <span class="pspan1">{{ v.price }}</span><span class="pspan2">{{ v.priceold }}</span>
                </div>
              </div>
            </div>
        </van-tab>
        <van-tab title="路由器">
          <div class="dadada">
              <div v-for="(v,index) in shangpi2" :key="index" class="dahngp" @click="xiangxi8(index)">
                <div>
                  <img :src="v.img1" alt="">
                </div>
                <div class="h1s">{{ v.h1 }}</div>
                <div class="h2s">{{ v.h2 }}</div>
                <div class="ssdfsds"><span class="span1">{{ v.huodong1 }}</span><span class="span1 span2">{{  v.huodong2 }}</span></div>
                <div class="ssdfsds">
                  <span class="pspan1">{{ v.price }}</span><span class="pspan2">{{ v.priceold }}</span>
                </div>
              </div>
            </div>
        </van-tab>
        <van-tab title="电脑组件">
          <div class="dadada">
              <div v-for="(v,index) in shangpi3" :key="index" class="dahngp" @click="xiangxi7(index)">
                <div>
                  <img :src="v.img1" alt="">
                </div>
                <div class="h1s">{{ v.h1 }}</div>
                <div class="h2s">{{ v.h2 }}</div>
                <div class="ssdfsds"><span class="span1">{{ v.huodong1 }}</span><span class="span1 span2">{{  v.huodong2 }}</span></div>
                <div class="ssdfsds">
                  <span class="pspan1">{{ v.price }}</span><span class="pspan2">{{ v.priceold }}</span>
                </div>
              </div>
            </div>
        </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data(){
    return {
      active: 0,
      shangpi:"",
      shangpi1:"",
      shangpi2:"",
      shangpi3:"",
    }
  },
  methods:{
    xiangxi(index){
      this.$router.push({ path: '/xiangqing', query: { id: this.shangpi[index] }}).catch(err=>err);
    },
    xiangxi9(index){
      this.$router.push({ path: '/xiangqing', query: { id: this.shangpi1[index] }}).catch(err=>err);
    },
    xiangxi8(index){
      this.$router.push({ path: '/xiangqing', query: { id: this.shangpi2[index] }}).catch(err=>err);
    },
    xiangxi7(index){
      this.$router.push({ path: '/xiangqing', query: { id: this.shangpi3[index] }}).catch(err=>err);
    }
  },
  mounted(){
      this.$http({
            url:"http://localhost:3000/selected",
            method:"get"
      }).then(res=>{
            var shangweis = JSON.parse(JSON.stringify(res.data[0].data.data1))
            var shangweis1 = JSON.parse(JSON.stringify(res.data[0].data.data1))
            var shangweis2 = JSON.parse(JSON.stringify(res.data[0].data.data1))
            var shangweis3 = JSON.parse(JSON.stringify(res.data[0].data.data1))
            this.shangpi1 = shangweis.sort(function(){return Math.random()>0.5?-1:1;})
            this.shangpi2 = shangweis1.sort(function(){return Math.random()>0.5?-1:1;})
            this.shangpi3 = shangweis2.sort(function(){return Math.random()>0.5?-1:1;})
            this.shangpi = shangweis3.sort(function(){return Math.random()>0.5?-1:1;})
      })
  }
}
</script>

<style scoped>
.pspan1{
  font-size: 5vw;
  color: red;
  margin-right: 3vw;
}
.pspan2{
  font-size: 3vw;
  opacity: 0.5;
  text-decoration: line-through;
}
.h1s{
  font-size: 4vw;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 2vw 0 2vw;
}
.h2s{
  font-size: 3vw;
  opacity: 0.6;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 2vw 0 2vw;
}
.span1{
  padding: 1vw;
  color: rgba(255, 0, 0, 0.809);
}
.span2{
  margin: 2vw;
}
.ssdfsds{
  margin: 0 0 2vw 2vw;
}
.dadada{
  /* display: flex;
  flex-wrap: wrap; */
  /* margin: auto; */
  column-count: 2;
  column-gap: 0px;
  padding-left: 5vw;
}
.dahngp{
  width: 43vw;
  margin: 4vw 0 0 0;
  border: 1px solid #00000053;
  border-radius: 6px;
}
.namess{
  margin-bottom: 30vw;
}
.dahngp img{
  width: 100%;
}
</style>